// fixes wierd nav.toggleable floats
@include media-breakpoint-down(sm) {
  .navbar-toggleable-sm {
    clear: both;
  }
}

.navbar {
  background-image: url('/images/jumbotron/hero.png');
  @include image-2x('/images/jumbotron/hero@2x.png');
  background-size: cover;
}

.headroom {
  will-change: transform;
  transition: transform 200ms linear;
}

.headroom--pinned {
  transform: translateY(0%);
}

.headroom--unpinned {
  transform: translateY(-100%);
}

.headroom--top {
  .nav__claim {
    margin-top: 10px;
    max-height: 200px;
  }
}

.bg-inverse {
  a, i, span {
    color: $white;
  }
}
.navbar-toggler {
  @include rem(margin-top, 15px)
  color: $white;
}

.navbar-nav {
  @include rem(margin-top, 10px)
}

.nav-link {
  @extend .link-decorator;
}

.nav__claim {
  will-change: transform;
  max-height: 0;
  overflow: hidden;
  @include transition('max-height 2s ease-in-out')
}

span.nav__claim__items {
  margin-right: 7px;
}
